<template>
  <button 
    :class="`copy-btn ${copying ? 'copying' : ''}`" 
    @click="copyToClipboard" 
    :title="title || '复制到剪贴板'"
  >
    <span v-if="!copying">{{ label || '复制' }}</span>
    <span v-else>已复制!</span>
  </button>
</template>

<script setup>
/**
 * 复制按钮组件
 * 通用组件，用于将内容复制到剪贴板
 */
import { ref } from 'vue'

// 属性定义
const props = defineProps({
  /**
   * 要复制的文本内容
   */
  content: {
    type: String,
    required: true
  },
  
  /**
   * 按钮标签文字
   */
  label: {
    type: String,
    default: '复制'
  },
  
  /**
   * 按钮提示文字
   */
  title: {
    type: String,
    default: '复制到剪贴板'
  },
  
  /**
   * 复制成功后的回调函数
   */
  onSuccess: {
    type: Function,
    default: null
  },
  
  /**
   * 复制失败后的回调函数
   */
  onError: {
    type: Function,
    default: null
  }
})

// 状态
const copying = ref(false)

/**
 * 复制内容到剪贴板
 * 使用navigator.clipboard API
 */
async function copyToClipboard() {
  try {
    // 确保有内容可复制
    if (!props.content) {
      console.warn('没有内容可复制')
      return
    }
    
    // 执行复制操作
    await navigator.clipboard.writeText(props.content)
    
    // 更新状态为已复制
    copying.value = true
    
    // 1.5秒后恢复状态
    setTimeout(() => {
      copying.value = false
    }, 1500)
    
    // 调用成功回调
    if (props.onSuccess && typeof props.onSuccess === 'function') {
      props.onSuccess()
    }
  } catch (error) {
    console.error('复制失败:', error)
    
    // 调用错误回调
    if (props.onError && typeof props.onError === 'function') {
      props.onError(error)
    }
  }
}
</script>

<style scoped>
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #334155;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background-color: #e2e8f0;
  color: #1e293b;
}

.copy-btn.copying {
  background-color: #10b981;
  border-color: #10b981;
  color: white;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .copy-btn {
    background-color: #334155;
    border-color: #475569;
    color: #e2e8f0;
  }
  
  .copy-btn:hover {
    background-color: #475569;
    color: #f8fafc;
  }
}
</style> 